<template>
  <Drawer :title="title">
    <!-- 表单 -->
    <FosoForm
      ref="formRef"
      :form-columns="formColumns"
      :form-data="formData"
      :form-rules="formRules"
      label-position="top"
      label-width="100px"
    >
      <template #gender> <Test /> </template>
    </FosoForm>
  </Drawer>
</template>

<script lang="ts" setup>
import { useVbenDrawer } from '@vben/common-ui';

import Test from '../../oauth/test.vue';

defineProps({
  // 表单数据
  title: {
    type: String,
    default: '',
  },
});
// 校验规则
const formRules = ref({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
});
const [Drawer] = useVbenDrawer();

// 表单实例
const formRef = ref();
// 表单数据
const formData = ref({
  name: '',
  age: 18,
  gender: '',
  munetype: 'dir',
  gender2: '',
  checkedCities: ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'],
  gender3: '',
  cascader: [],
  allselect: false,
  gender4: '',
  tree: [], // Tree 组件绑定的数据
});

const menuHidden = ref(true); // 控制菜单项的显示和隐藏
const PageEleHidden = ref(false); // 控制页面元素项的显示和隐藏
// 表单配置项
const formColumns = computed(() => [
  {
    label: '菜单类型',
    prop: 'munetype',
    xType: 'RadioGroup',
    span: 24,
    componentProps: {
      onChange: (val: string) => {
        menuHidden.value = false;
        if (val === 'dir') {
          PageEleHidden.value = false;
          menuHidden.value = true;
        }
        if (val === 'menu') {
          // PageEleHidden.value = true;
        }
        if (val === 'button') {
          PageEleHidden.value = true;
          menuHidden.value = true;
        }
      },
      options: [
        { label: '目录', value: 'dir' },
        { label: '菜单', value: 'menu' },
        { label: '页面元素', value: 'button' },
      ],
    },
  },
  {
    label: '菜单名称',
    prop: 'name',
    xType: 'Input',
    hidden: false,
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '显示名称',
    prop: 'name',
    xType: 'Input',
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '上级菜单',
    prop: 'gender2', // 绑定到 formData.gender
    xType: 'Select',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' },
    ],
    componentProps: {
      clearable: true, // el-select 的属性
    },
  },
  {
    label: '图标',
    prop: 'gender', // 绑定到 formData.gender
    xType: 'Select',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' },
    ],
    componentProps: {
      clearable: true, // el-select 的属性
    },
  },
  {
    label: '所属服务',
    prop: 'name',
    xType: 'Input',
    span: 24, // 自行配置行宽
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '路由地址',
    prop: 'name',
    xType: 'Input',
    hidden: PageEleHidden.value,
    span: 24, // 自行配置行宽
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '跳转路径',
    prop: 'name',
    xType: 'Input',
    hidden: menuHidden.value,
    span: 24, // 自行配置行宽
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: 'Iframe地址',
    prop: 'name',
    xType: 'Input',
    hidden: menuHidden.value,
    span: 24, // 自行配置行宽
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '固定的地址',
    prop: 'name',
    xType: 'Input',
    span: 24, // 自行配置行宽
    hidden: menuHidden.value,
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '排序',
    prop: 'name',
    xType: 'Input',
    span: 12, // 自行配置行宽
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '权限标识',
    prop: 'name',
    xType: 'Input',
    span: 12, // 自行配置行宽
    hidden: !PageEleHidden.value,
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '能打开Tab的最大数量',
    prop: 'name',
    xType: 'Input',
    hidden: PageEleHidden.value,
    span: 12, // 自行配置行宽
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '状态',
    prop: 'munetype',
    xType: 'RadioGroup',
    componentProps: {
      options: [
        { label: '启用', value: 'dir' },
        { label: '停用', value: 'menu' },
      ],
    },
  },
]);
// 遍历下面按钮
// const traverseButtons = () => {
//   const bottomButtons = [];
//   for (let i = 0; i < 7; i++) {
//     const obj = {
//       label: btnType[i],
//       prop: 'munetype',
//       xType: 'RadioGroup',
//       componentProps: {
//         options: [
//           { label: '启用', value: 'dir' },
//           { label: '停用', value: 'menu' },
//         ],
//       },
//     };
//     bottomButtons.push(obj);
//   }
//   formColumns.value.push(...bottomButtons);
// };

onMounted(() => {
  // traverseButtons();
});
</script>
